<!DOCTYPE html>
<script src="../include.js"></script>

<!-- opening an auto popover hides unrelated popovers -->
<!-- hiding a popover also hides its decendants -->

<div popover id=outer>
    <div popover id=middle>
        <div popover id=inner>
        </div>
    </div>
    <div popover id=second>
    </div>
</div>

<script>
    test(() => {
        const outer = document.getElementById("outer");
        const middle = document.getElementById("middle");
        const inner = document.getElementById("inner");
        const second = document.getElementById("second");

        outer.showPopover();
        middle.showPopover();
        inner.showPopover();

        if (outer.matches(":popover-open")
            && middle.matches(":popover-open")
            && inner.matches(":popover-open")
            && !second.matches(":popover-open"))
            println("PASS");

        second.showPopover();

        if (outer.matches(":popover-open")
            && !middle.matches(":popover-open")
            && !inner.matches(":popover-open")
            && second.matches(":popover-open"))
            println("PASS");
    });
</script>
